<template>
  <div class="variation">
    <VariationSide
      v-model:date="queryParams.date"
      @update="query"
    />
    <n-flex
      class="w100"
      vertical
      :size="0"
    >
      <VariationNav />
      <div class="variation-container">
        <n-flex
          justify="end"
          class="mb16"
        >
          <n-input
            v-model:value="queryParams.name"
            type="text"
            placeholder="请输入名称"
            style="width: 200px"
            size="small"
          />
          <n-button
            type="primary"
            size="small"
            @click="query"
            >搜索</n-button
          >
        </n-flex>
        <n-data-table
          :columns="columns"
          :data="list"
        />
      </div>
    </n-flex>
  </div>
</template>

<script lang="ts" setup>
  import VariationSide from './VariationSide.vue'
  import VariationNav from './VariationNav.vue'
  import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
  import { NProgress } from 'naive-ui'
  import type { DataTableColumns } from 'naive-ui'
  import { getVariationList } from '@/api/bill/variation'
  import { formatTime } from '@/utils/time'
  import useTable from '@/hooks/useTable'

  const columns = ref<DataTableColumns<any>>([
    {
      title: '图标',
      key: 'icon',
      align: 'center',
      width: 100,
      render(row) {
        return [
          h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, [
            h(
              'div',
              {
                style: {
                  background: row.type === 0 ? '#18a058' : '#e5b951',
                  width: '26px',
                  height: '26px',
                  textAlign: 'center',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: '9999px'
                }
              },
              h(
                SvgIcon,
                {
                  name: row.icon,
                  style: { fontSize: '16px' }
                },
                {}
              )
            ),
            h('span', { style: { marginLeft: '8px' } }, row.payName)
          ])
        ]
      }
    },
    {
      title: '支付方式',
      key: 'cardName',
      align: 'center'
    },

    {
      title: '支出/收入',
      key: 'price',
      align: 'right',
      render(row) {
        return h(
          'span',
          {
            style: {
              fontWeight: 'bold'
            }
          },
          {
            default: () => `${row.price}元`
          }
        )
      }
    },
    {
      title: '备注',
      key: 'name'
    },
    {
      title: '本月剩余额度',
      key: 'surplus',
      align: 'right'
    },
    {
      title: '本月剩余额度比例',
      key: 'surplusRate',
      align: 'center',
      width: 200,
      render(row) {
        return h(
          NProgress,
          {
            type: 'line',
            percentage: row.surplusRate,
            indicatorPlacement: 'outside',
            status: 'success',
            processing: true,
            style: 'font-size: 12px;'
          },
          {
            default: () => `${row.surplusRate}%`
          }
        )
      }
    },

    {
      title: '时间',
      key: 'payTime',
      align: 'center'
    }
  ])

  const { queryParams, query, list } = useTable({
    queryFn: parmas =>
      getVariationList({
        ...parmas,
        date: formatTime(parmas.date, 'YYYY-MM-DD')
      }),
    isPage: false,
    queryParams: {
      date: new Date(),
      name: ''
    }
  })
</script>

<style scoped lang="scss">
  .variation {
    display: flex;
    &-container {
      flex: 1;
      margin: $space-default;
      padding: $space-default;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: $radius-sm;
      box-shadow: $shadow-lv3;
    }
  }
</style>
